<template>
  <div v-if="form['yearOld60']" class="container">
    <div class="table">
      <h2>{{ form['yearOld60'].label }}</h2>
      <h2>
        {{ form['yearOld60'].value ? '是' : '否' }}
      </h2>
      <table>
        <tr class="abilityWrap h-94">
          <td class="w-187 bor-r justContentCenter">
            {{ form['yearOld60']['data']['ability'].title }}
          </td>
          <td class="abilityList">
            <div
              v-for="item in form['yearOld60']['data']['ability']['data']"
              :key="item.key"
              class="abilityListItem"
            >
              <span>{{ item.title }}：</span>
              <span>
                {{
                  item.key === 'final_evaluation_result'
                    ? item.value
                    : item.value === ''
                    ? '/'
                    : item.value + '分'
                }}
              </span>
            </div>
          </td>
        </tr>
        <tr>
          <td class="w-187 h-45 bor-r justContentCenter">
            {{ form['yearOld60']['data']['syndrome'].title }}
          </td>
          <td>
            <template
              v-if="Array.isArray(form['yearOld60']['data']['syndrome'].value)"
            >
              {{
                form['yearOld60']['data']['syndrome'].options
                  .filter(v =>
                    form['yearOld60']['data']['syndrome'].value.includes(
                      v.value
                    )
                  )
                  .map(v => {
                    if (v.value == '11') {
                      return (
                        '其他（请补充）：' +
                        form['yearOld60']['data']['syndrome'].other
                      )
                    }
                    return v.label
                  })
                  .join('，')
              }}
            </template>
            <!-- <template
              v-if="form['yearOld60']['data']['syndrome'].value.includes('11')"
            >
              <span>其他：</span>
              <span>
                {{ form['yearOld60']['data']['syndrome'].other || '/' }}
              </span>
            </template> -->
          </td>
        </tr>
        <tr>
          <td class="w-187 bor-r justContentCenter">
            {{ form['yearOld60']['data']['nursingLevel'].title }}
          </td>
          <td>
            {{ form['yearOld60']['data']['nursingLevel'].value }}
          </td>
        </tr>
        <tr class="nursingMeasuresWrap">
          <td>
            <div class="mask"></div>
            <div>{{ form['yearOld60']['data']['nursingMeasures'].title }}</div>
            <el-checkbox-group
              v-model="form['yearOld60']['data']['nursingMeasures'].value"
            >
              <el-checkbox
                v-for="v in form['yearOld60']['data']['nursingMeasures']
                  .options"
                :key="v.value"
                :label="v.value"
                >{{ v.label }}</el-checkbox
              >
            </el-checkbox-group>
          </td>
        </tr>
      </table>
    </div>
    <div class="table">
      <h2>化疗病人</h2>
      <h2>
        {{ form['chePatients'] && form['chePatients'].value ? '是' : '否' }}
      </h2>
      <table>
        <tr>
          <Item
            header
            label="外周静脉条件"
            :value="form['peripheral_venous_conditions'].value"
          />
        </tr>
        <tr class="h-60">
          <Item
            class="w-30 h-60 bor-r"
            header
            label="静脉通路"
            :value="form['venous_access'].value"
          />
          <td class="h-60 flex-2 block pad-0">
            <div class="h-30 bor-b">
              <div class="left w-33 bor-r">
                <label class="text line-30" style="width: 54px">PICC : </label>
                <span class="line-30">
                  {{
                    form['venous_access_select'].value === 'PICC'
                      ? form['venous_access_content'].value
                      : ''
                  }}
                </span>
              </div>
              <div>
                <label class="text line-30" style="width: 54px">
                  深静脉 :
                </label>
                <span class="line-30">
                  {{
                    form['venous_access_select'].value === '深静脉'
                      ? form['venous_access_content'].value
                      : ''
                  }}
                </span>
              </div>
            </div>
            <div class="h-30">
              <label class="text line-30" style="width: 54px">其他 : </label>
              <span class="line-30">
                {{
                  form['venous_access_select'].value === '其他'
                    ? form['venous_access_content'].value
                    : ''
                }}
              </span>
            </div>
          </td>
        </tr>
        <tr>
          <Item
            class="w-30"
            header
            label="化疗情况"
            :value="form['chemotherapy'].value"
          />
          <Item
            class="w-30"
            label="化疗次数"
            label-width="54px"
            :value="form['chemotherapy_num'].value"
          />
          <Item
            label="其他不良反应"
            :value="form['other_adverse_reactions'].value"
          />
        </tr>
        <tr>
          <Item
            header
            label="病情是否知晓"
            :value="form['is_condition_known'].value"
          />
        </tr>
      </table>
    </div>
    <div class="table">
      <h2>感染性疾病病人</h2>
      <h2>
        {{ form['infecDiseases'] && form['infecDiseases'].value ? '是' : '否' }}
      </h2>
      <table>
        <tr>
          <Item
            header
            label="传染病类型"
            :value="form['infectious_diseases_types'].value"
          />
        </tr>
        <tr>
          <Item
            header
            label="传染途径"
            :value="form['transmission_route'].value"
          />
        </tr>
        <tr>
          <Item
            header
            is-special-title
            label="聚集性"
            :value="form['aggregation'].value"
          />
        </tr>
        <tr>
          <Item
            class="w-30"
            header
            label="疫源接触史"
            :value="form['contact_history_epidemic_focus'].value"
          />
          <Item
            label="内容"
            label-width="54px"
            :value="form['contact_history_epidemic_focus_cont'].value"
          />
        </tr>
        <tr>
          <Item
            class="w-30"
            header
            is-special-title
            label="冶游史"
            :value="form['metallurgical_travel_history'].value"
          />
          <Item
            label="内容"
            label-width="54px"
            :value="form['metallurgical_travel_history_cont'].value"
          />
        </tr>
        <tr>
          <Item
            class="w-30"
            header
            is-special-title
            label="发热"
            :value="form['fever'].value"
          />
          <Item
            label="内容"
            label-width="54px"
            :value="form['fever_cont'].value"
          />
        </tr>
        <tr>
          <Item
            class="w-30"
            header
            is-special-title
            label="皮疹"
            :value="form['rash'].value"
          />
          <Item
            label="内容"
            label-width="54px"
            :value="form['rash_cont'].value"
          />
        </tr>
      </table>
    </div>
    <div class="table">
      <h2>免疫功能低下病人</h2>
      <h2>
        {{ form['lowImmuneFunc'] && form['lowImmuneFunc'].value ? '是' : '否' }}
      </h2>
      <table>
        <tr>
          <Item
            header
            label="免疫抑制剂应用"
            :value="
              formatOptions(
                'immunosuppressant_application',
                'immunosuppressant_application_cont',
                '有'
              )
            "
          />
        </tr>
        <tr>
          <Item
            header
            is-special-title
            label="发热"
            :value="
              formatOptions(
                'low_immune_function_fever',
                'low_immune_function_fever_cont',
                '有'
              )
            "
          />
        </tr>
        <tr>
          <Item label="白细胞数量" :value="form['leukocyte_Num'].value" />
        </tr>
        <tr>
          <Item label="中性粒细胞数量" :value="form['neutrophils_num'].value" />
        </tr>
      </table>
    </div>

    <table class="sum">
      <tr>
        <td class="label">资料来源</td>
        <td>{{ data.dataSrc === '其他' ? data.dataExt : data.dataSrc }}</td>
      </tr>
      <tr>
        <td class="label">评估时间</td>
        <td>
          <span>{{ formatTime(data.pfTime, 'yyyy-MM-dd HH:mm:ss') }}</span>
          <span class="sign">评估护士签名：{{ data.updateName }}</span>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
import { cloneDeep } from 'lodash-unified'
import { defineComponent, onMounted, reactive, toRefs, watch } from 'vue'

import { formatTime } from '@/utils/format'
import config from '@/views/homeNew/evaluation/json/specPopulation1.json' //配置信息
import yearOld60 from '@/views/homeNew/evaluation/json/yearOld60.json'

import Item from '../RYItem.vue'

export default defineComponent({
  components: { Item },
  props: {
    data: {
      type: Object,
      default: () => {
        return { jsonText: '{}' }
      }
    }
  },
  setup(props) {
    const state = reactive({
      date: '',
      value: '12',
      config: config,
      form: {}
    })

    function initData() {
      //初始化数据
      const form = {}, //表单对象
        config = cloneDeep(state.config) //配置项
      for (const x in config) {
        if (config[x].isVisible) {
          form[config[x].formName] = {
            label: config[x].formTitle,
            value: true
          }
          for (const y in config[x].data) {
            for (const z in config[x].data[y].data1) {
              for (const i in config[x].data[y].data1[z].data2) {
                const obj = config[x].data[y].data1[z].data2[i]
                if (obj.key) {
                  form[obj.key] = {
                    label: obj.desc,
                    value: ''
                  }
                }
              }
            }
          }
        }
      }
      //由于Object.assign对于子对象的处理是直接覆盖，所以需要循环赋值，用于保留子对象的其余参数
      const _data = JSON.parse(props.data.jsonText) || {}
      for (const i in form) {
        form[i] = Object.assign(form[i], _data[i] || '')
      }
      initYearOld60Data(form)
      state.form = form
    }

    function formatOptions(el1, el2, text = '其他') {
      return state.form[el1].value === text
        ? state.form[el2].value
        : state.form[el1].value
    }

    /**
     * 初始化60岁老人表单数据
     */
    function initYearOld60Data(form) {
      if (form['yearOld60'] && !form['yearOld60'].data) {
        form['yearOld60'].data = cloneDeep(yearOld60)
      }
    }

    watch(
      () => props.data,
      () => {
        initData()
      }
    )

    onMounted(() => {
      initData()
    })

    return {
      ...toRefs(state),
      formatTime,
      formatOptions
    }
  }
})
</script>

<style lang="scss" scoped>
@import '@/views/doc/styles/doc-common.scss';
$border: 1px solid #000;

.container {
  margin: 0 auto;
  width: calc(100% - 126px);
  font-family: SiYuanSong-Medium;
}

table {
  margin-left: -1px;
  border-collapse: collapse;

  tr {
    display: flex;
    align-items: center;
    border: $border;

    &:not(:first-child) {
      margin-top: -1px;
    }

    td {
      padding-left: 8px;
      height: 30px;
      display: flex;
      align-items: center;
      font-size: getpx(36);
    }
  }
}

.table {
  display: grid;
  grid-template-columns: getpx(170) getpx(240) auto;
  box-sizing: border-box;

  & + .table {
    margin-top: -1px;
  }

  h2 {
    margin: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-weight: normal;
    font-size: getpx(60);
    border: $border;

    & + h2 {
      margin-left: -1px;
    }

    &:nth-child(1) {
      padding: 0 getpx(26);
      font-size: getpx(40);
    }

    &:nth-child(2) {
      font-size: getpx(32);
    }
  }

  table {
    margin-left: -2px;
  }
}

.sum {
  margin: -1px 0 0;
  width: 100%;

  tr {
    td {
      &.label {
        width: getpx(404);
        height: 19px;
        justify-content: center;
        font-size: getpx(48);

        &::after {
          content: ':';
        }
      }

      span {
        display: inline-block;

        &.sign {
          width: 50%;
          text-align: left;
        }
      }

      &:nth-child(2) {
        margin-left: -1px;
        border-left: 1px solid #000;
      }
    }

    &:nth-child(2) {
      td {
        &:nth-child(2) {
          flex: 2;
          justify-content: space-between;
        }
      }
    }

    &:nth-child(3) {
      span {
        margin-right: getpx(51);
      }
    }
  }
}

.w-10 {
  min-width: 10%;
}

.w-15 {
  min-width: 15%;
}

.w-16 {
  min-width: 16%;
}

.w-17 {
  min-width: 17%;
}

.w-19 {
  min-width: 19%;
}

.w-20 {
  min-width: 20%;
}

.w-25 {
  min-width: 25%;
}

.w-30 {
  min-width: 30%;
}

.w-33 {
  min-width: 33%;
}

.w-40 {
  min-width: 40%;
}

.w-42 {
  min-width: 42%;
}

.w-45 {
  min-width: 45%;
}

.w-58 {
  min-width: 58%;
}

.w-187 {
  width: 187px;
  flex-shrink: 0;
}

.w-186 {
  width: 186px;
  flex-shrink: 0;
}

.bor {
  &-r {
    border-right: 1px solid;
  }

  &-b {
    border-bottom: 1px solid;
  }
}

.h {
  &-30 {
    height: 30px;
  }

  &-45 {
    height: 45px;
  }

  &-60 {
    height: 60px;
  }

  &-94 {
    height: 94px;
  }
}

.line {
  &-30 {
    line-height: 30px;
  }
}

.block {
  display: block;
}

.flex {
  &-2 {
    flex: 2;
  }
}

.left {
  float: left;
}

.pad {
  &-0 {
    padding: 0;
  }
}

.justContentCenter {
  justify-content: center;
}

.abilityWrap {
  td {
    height: 100%;
  }

  .abilityList {
    flex-flow: column nowrap;
    align-items: flex-start;

    .abilityListItem {
      display: flex;
      margin-top: 4px;
      line-height: 17px;

      span {
        &:nth-child(1) {
          width: 168px;
          text-align: right;
        }

        &:nth-child(2) {
          margin-left: 20px;
        }
      }
    }
  }
}

.nursingMeasuresWrap {
  td {
    position: relative;
    flex-flow: column nowrap;
    align-items: flex-start;
    height: 217px;
    padding-top: 9px;

    .mask {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      z-index: 9;
    }

    ::v-deep .el-checkbox-group {
      display: flex;
      flex-flow: column nowrap;
      align-items: flex-start;

      .el-checkbox {
        margin-top: 4px;
        line-height: 17px;
      }
    }
  }
}
</style>
